import { defineComponent, ref, onMounted } from 'vue'
import { NTable, NCode } from 'naive-ui'
import pageStyle from './styles/index.module.scss'
import MessageBox from '@/components/nComponents/MessageBox'
export default defineComponent({
  emits: ['loaded'],
  setup(props, { expose, emit }) {
    const slOne = `if(value) {
    backText = value.length + 1
} else {
    backText = 0
}`
    const slTwo = `backText = value ? splitter.countGraphemes(value) : 0`
    const show = ref(false)
    const open = () => {
      show.value = true
    }
    expose({
      open
    })

    onMounted(() => {
      emit('loaded')
    })
    return () => (
      <>
        <MessageBox
          width="600px"
          title="计算输入字数说明"
          v-model={show.value}
          v-slots={{
            default: () => (
              <>
                <div class={pageStyle.illustrate}>
                  <div class="desc">
                    警告:如果设定了，那么原生的 maxlength 和 minlength 属性将不再被使用
                  </div>
                  <NTable bordered={true} single-line={false}>
                    <thead>
                      <tr>
                        <th>内置参数</th>
                        <th>说明</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>value</td>
                        <td>输入文本,可能为空</td>
                      </tr>
                    </tbody>
                  </NTable>
                  <NTable class="mt-[20px]" bordered={true} single-line={false}>
                    <thead>
                      <tr>
                        <th>返回参数</th>
                        <th>说明</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>backText</td>
                        <td>对此赋值</td>
                      </tr>
                    </tbody>
                  </NTable>
                  <div class="example">
                    <NCode code={slOne} language="js" word-wrap={true} show-line-numbers />
                  </div>
                  <NTable class="mt-[20px]" bordered={true} single-line={false}>
                    <thead>
                      <tr>
                        <th>内置函数</th>
                        <th>说明</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>splitter</td>
                        <td>详细请参考grapheme-splitter</td>
                      </tr>
                    </tbody>
                  </NTable>
                  <div class="example">
                    <NCode code={slTwo} language="javascript" show-line-numbers />
                  </div>
                </div>
              </>
            )
          }}
        />
      </>
    )
  }
})
